<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-table :data="skuList" border stripe v-loading="tableIsLoading">
        <el-table-column type="index" width="80" label="序号" align="center" />
        <el-table-column label="名称" prop="skuName"> </el-table-column>
        <el-table-column label="描述" prop="skuDesc"> </el-table-column>
        <el-table-column label="默认图片">
          <template v-slot="{ row }">
            <img :src="row.skuDefaultImg" width="80" alt="" />
          </template>
        </el-table-column>
        <el-table-column label="重量" prop="weight"> </el-table-column>
        <el-table-column label="价格" prop="price"> </el-table-column>
        <el-table-column label="操作">
          <template v-slot="{ row }">
            <el-button
              v-if="row.isSale"
              type="success"
              size="small"
              title="下架"
              @click="cancelSale(row.id)"
              icon="ele-Bottom"
            ></el-button>
            <el-button
              v-else
              type="info"
              size="small"
              title="上架"
              @click="onSale(row.id)"
              icon="ele-Top"
            ></el-button>
            <el-button
              type="primary"
              size="small"
              title="编辑"
              @click="editSku"
              icon="ele-Edit"
            ></el-button>
            <el-button
              type="info"
              size="small"
              title="查看"
              @click="openDrawer(row.id)"
              icon="ele-Warning"
            ></el-button>
            <el-button
              type="danger"
              size="small"
              title="删除"
              @click="deleteSku(row.id)"
              icon="ele-Delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:currentPage="currentPage"
        :page-sizes="[3, 5, 7, 9]"
        v-model:pageSize="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        :style="{ margin: '25px' }"
      >
      </el-pagination>

      <!-- 抽屉 -->
      <el-drawer v-model="drawer" size="50%" :with-header="false">
        <el-row>
          <el-col :span="8">SKU名称</el-col>
          <el-col :span="16">{{ drawerData.skuName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">SKU描述</el-col>
          <el-col :span="16">{{ drawerData.skuDesc }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">SKU价格</el-col>
          <el-col :span="16">{{ drawerData.price }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="8">平台属性</el-col>
          <el-col :span="16">
            <el-tag
              type="success"
              size="small"
              v-for="item in drawerData.skuAttrValueList"
              :key="item.id"
            >
              {{ item.attrName }}-{{ item.valueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">销售属性</el-col>
          <el-col :span="16">
            <el-tag
              type="warning"
              size="small"
              v-for="item in drawerData.skuSaleAttrValueList"
              :key="item.id"
            >
              {{ item.saleAttrName }}-{{ item.saleAttrValueName }}
            </el-tag>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">商品图片</el-col>
          <el-col :span="16">
            <el-carousel height="300px" ref="carousel">
              <el-carousel-item
                v-for="item in drawerData.skuImageList"
                :key="item.id"
              >
                <img :src="item.imgUrl" height="300" alt="" />
              </el-carousel-item>
            </el-carousel>
          </el-col>
        </el-row>
      </el-drawer>
    </el-card>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from "vue"

  export default defineComponent({
    name: "Sku",
  })
</script>

<script setup lang="ts">
  import { onMounted, ref, watch, nextTick } from "vue"
  import {
    reqSkuPageList,
    reqCancelSale,
    reqOnSale,
    reqDeleteSku,
    reqSkuDetail,
  } from "@/api/sku"
  import type { skuInfoListType, skuInfoType } from "@/api/sku"
  import { ElMessage } from "element-plus"
  //页码逻辑
  const currentPage = ref(1) //当前页
  const pageSize = ref(10) //每页数量
  const totalNum = ref(0) //数据总数量

  //定义一个数据保存初始化的skuList
  const skuList = ref<skuInfoListType>([])

  //定义一个发送请求时的loading状态，防止连续点击
  const tableIsLoading = ref(false)

  //封装一个初始化请求sku列表数据的方法
  const getSkuList = async () => {
    const result = await reqSkuPageList(currentPage.value, pageSize.value)
    // console.log(result)
    //赋值操作
    skuList.value = result.records
    totalNum.value = result.total
    //请求完毕后关闭loading状态
    tableIsLoading.value = false
  }

  //初始化发送请求
  onMounted(() => {
    getSkuList()
  })

  //监听当前页和每页数量的改变，重新发送请求，实现翻页
  watch([currentPage, pageSize], () => {
    //打开loading状态
    tableIsLoading.value = true
    //发送数据请求
    getSkuList()
    //使滚轮回到页面最上方
    window.scrollTo(0, 0)
  })

  //下架逻辑
  const cancelSale = async (id: number) => {
    //打开loading状态
    tableIsLoading.value = true
    //发送下架请求
    await reqCancelSale(id)
    //提示信息
    ElMessage.warning("下架成功！")
    //获取最新数据列表
    getSkuList()
  }

  //上架逻辑
  const onSale = async (id: number) => {
    //打开loading状态
    tableIsLoading.value = true
    //发送上架请求
    await reqOnSale(id)
    //提示信息
    ElMessage.success("上架成功！")
    //获取最新数据列表
    getSkuList()
  }

  //修改sku
  const editSku = () => {
    ElMessage.error("正在开发中...")
  }

  //删除sku
  const deleteSku = async (id: number) => {
    //打开loading状态
    tableIsLoading.value = true
    //发送删除请求
    await reqDeleteSku(id)
    //提示信息
    ElMessage.success("删除成功！")
    //获取最新数据列表
    getSkuList()
  }

  //定义一个抽屉是否展示的数据
  const drawer = ref(false)

  //定义一个抽屉内部的初始化数据
  const drawerData = ref<skuInfoType>({
    id: 0,
    spuId: 0, //所在的spuId
    price: 0, //当前sku的价格
    skuName: "", //当前sku的名称
    skuDesc: "", //当前sku的描述
    weight: "", //当前sku的重量
    tmId: 0, //当前sku所在的品牌id
    category3Id: 0, //当前sku所在的三级分类的id
    skuDefaultImg: "", //当前sku的默认的图片
    isSale: 0, //当前sku是否上架
    createTime: "", //当前sku的创建时间
    skuImageList: [], //当前sku图片列表
    skuAttrValueList: [], //当前sku属性值列表
    skuSaleAttrValueList: [], //当前sku销售属性值列表
  })

  //获取carousel元素，解决轮播图打开时第一张偶尔不展示的bug
  const carousel = ref()

  //点击查看按钮打开抽屉事件
  const openDrawer = async (skuId: number) => {
    //打开抽屉
    drawer.value = true
    //发起数据请求
    const result = await reqSkuDetail(skuId)
    // console.log(result)
    //赋值操作
    drawerData.value = result

    //请求完成数据调用carousel组件的方法（手动切换展示某一张）
    //需要在dom渲染完毕后调用
    nextTick(() => {
      carousel.value.setActiveItem(0)
    })
  }
</script>

<style scoped lang="scss">
  .el-row {
    margin-bottom: 25px;
  }
  .el-carousel__item {
    text-align: center;
  }
  .el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
    text-align: center;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
  }

  //sass语法的深度选择器
  :deep(.el-carousel__indicator) {
    button {
      background: red;
    }
  }
  //原生css方式的深度选择器
  /* .el-carousel__item >>> .el-carousel__indicator button {
  background: red;
} */
</style>
